<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>切换黑白主题</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<style>
    #bai {
        width: 150px;
        height: 150px;
        
    }
    #hei {
        width: 150px;
        height: 150px;
    }
</style>

<body>
    <div style="width:700px;height:500px;background:#f4f5f5;">
        <img id="bai" src="D:\前端\三段（2）\白色.png" alt="">
        <img id="hei" src="D:\前端\三段（2）\黑色.png" alt="" style="display: none;">
    </div>
</body>
<script>
    $("#bai").click(function () {
        $("#bai").css("display","none")
        $("#hei").css("display","block")
        $("div").css("background", "#000414")
    })
    $("#hei").click(function () {
        $("#hei").css("display","none")
        $("#bai").css("display","block")
        $("div").css("background", "#f4f5f5")
    })
</script>

</html>